<template>
	<view class="category-box">
		<!-- 模版一的搜索框 -->
		<view class="category-search-box" v-if="templatetype == 1">
			<text class="iconsearch_light iconfont category-search-btn" @click="search()"></text>
			<input class="uni-input" type="text" maxlength="50" v-model="searchText" confirm-type="搜索" placeholder="请输入关键词" @confirm="search()" />
		</view>
		<!-- 模版一的筛选条件 -->
		<view class="category-condition" v-if="templatetype == 1">
			<text class="sort" :class="{ 'ns-text-color': conditionIdent == 0 }" @click="comprehensiveSorting">综合排序</text>
			<text class="price" :class="{ 'ns-text-color': conditionIdent == 1, 'price-asc': priceIdent == 1, 'price-desc': priceIdent == 2 }" @click="price">按价格</text>
			<text class="sales-volume" :class="{ 'ns-text-color': conditionIdent == 2 }" @click="salesVolume">按销量</text>
		</view>
		<!-- 分类内容 -->
		<view v-if="categoryList.length > 0" class="category-content" :class="{ 'modular-one': templatetype == 1, 'modular-two': templatetype == 2 }">
			<!-- 侧边导航 -->
			<scroll-view scroll-y class="category-side-nav">
				<block v-for="(item, index) in categoryList" :key="index">
					<text v-if="nameType == 0" class="side-nav-item" :class="{ 'nav-select': sideIdent == index }" @click="sideNavClick(item.category_id, index)">
						{{ item.category_name }}
					</text>
					<text v-else class="side-nav-item" :class="{ 'nav-select': sideIdent == index }" @click="sideNavClick(item.category_id, index)">{{ item.short_name }}</text>
				</block>
			</scroll-view>
			<view class="catergory-details">
				<!-- 分类一 -->
				<scroll-view v-if="templatetype == 1" scroll-y scroll-with-animation show-scrollbar="false" class="catergory-temple-one" @scrolltolower="getGoodsInfo()">
					<navigator v-for="(item, index) in goodsList" :key="index" class="temple-one-item" :url="'/pages/goods/detail/detail?goods_id=' + item.goods_id">
						<view class="item-pic">
							<image :src="item.pic_cover_small == '' ? $util.img('upload/uniapp/default_goods.png') : $util.img(item.pic_cover_small)" mode="aspectFit"></image>
						</view>
						<view class="item-content">
							<text class="item-desc">{{ item.goods_name }}</text>
							<view class="item-operation">
								<text class="ns-text-color">¥{{ item.promotion_price }}</text>
								<text class="ns-text-color-gray">销量：{{ item.sales }}</text>
							</view>
						</view>
					</navigator>
					<uni-load-more :status="status" v-if="pageCount > 1 && goodsList.length > 0" />
				</scroll-view>
				<!-- 分类二 -->
				<scroll-view scroll-y v-if="templatetype == 2" class="catergory-temple-two">
					<navigator v-for="(item, index) in TwoCategoryList" :key="index" class="temple-two-item" :url="'/pages/goods/list/list?category_id=' + item.category_id">
						<view v-if="showImg == 1" class="item-pic">
							<image :src="$util.img(item.category_pic) ? $util.img(item.category_pic) : $util.img('upload/uniapp/default_goods.png')" mode=""></image>
						</view>
						<text class="item-name" :class="{ 'no-img': showImg == 0 }">{{ item.category_name }}</text>
					</navigator>
				</scroll-view>
				<!-- 分类三 -->
				<scroll-view scroll-y v-if="templatetype == 3" class="catergory-temple-three">
					<view v-for="(item, index) in TwoCategoryList" :key="index" class="temple-three-item">
						<!-- 三级标题 -->
						<navigator v-if="nameType == 0" class="item-title" :url="'/pages/goods/list/list?category_id=' + item.category_id">{{ item.category_name }}</navigator>
						<navigator v-else class="item-title" :url="'/pages/goods/list/list?category_id=' + item.category_id">{{ item.short_name }}</navigator>

						<view v-if="item.child_list" class="temple-three-content">
							<navigator
								v-for="(item1, index1) in item.child_list"
								:key="index1"
								class="temple-three-cell"
								:url="'/pages/goods/list/list?category_id=' + item1.category_id"
							>
								<view v-if="showImg == 1" class="item-pic">
									<image :src="$util.img(item1.category_pic) ? $util.img(item1.category_pic) : $util.img('upload/uniapp/default_goods.png')" mode=""></image>
								</view>
								<text v-if="nameType == 0" class="item-name" :class="{ 'no-img': showImg == 0 }">{{ item1.category_name }}</text>
								<text v-else class="item-name" :class="{ 'no-img': showImg == 0 }">{{ item1.short_name }}</text>
							</navigator>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view v-if="isEmpty && categoryList.length == 0" class="empty">
			<view class="iconfont iconwenzhangchaxun"></view>
			<view class="ns-text-color-gray">Sorry！没有找到您想要的商品分类…</view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import loadingCover from '@/components/loading/loading.vue';
import category from '../public/js/category.js';
export default {
	components: {
		uniLoadMore,
		loadingCover
	},
	mixins: [http, category]
};
</script>

<style lang="scss">
@import '../public/css/category.scss';
</style>
